fix: stabilise MenuPortal updateComputedPosition to prevent infinite re-render loop#6097
fix: stabilise MenuPortal updateComputedPosition to prevent infinite re-render loop#60979KenM wants to merge 2 commits into
Conversation
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
Just to pile on, we are also seeing this issue and this fix seems to address the underlying issue in our use case. |
Problem
updateComputedPositioncloses overcomputedPositionand lists itssub-properties (
offset,rect.left,rect.width) asuseCallbackdependencies. This means every call to
setComputedPositionproduces anew callback identity, which invalidates the
useLayoutEffect([updateComputedPosition])and immediately re-fires thecallback.
Under subpixel-drifting conditions (zoomed-out viewport, scrollable
ancestor, or fractional DPI) the measured
offsetoscillates by <1pxbetween frames. Each oscillation triggers
setComputedPosition→identity change → effect re-run → repeat, until React throws:
Fixes #6003.
Solution
Track
computedPositionin a ref so the comparison insideupdateComputedPositionalways reads the latest value without thecallback depending on it. This gives
updateComputedPositiona stableidentity across renders and breaks the loop.
Reproduction
<Select menuPosition="fixed" />inside a scrollable container